Bootstrap - Responsive Web Design

Motivations
- Try to resize the window http://tru.ca
- Doesn't the layout response to the resizing? Is the horizontal scroll bar used?
- How to use the same applications over different screen sizes, such as monitors and cell phones?
- Any good design templates or user interface components for Board Games Playground, such as dropdown menu, tab, and modal window?
- Can you find dropdown menu, tabs, and modal windows in TRU Board Games Playground?
- It is possible to use HTML5 and CSS for user interface components. But it would take some efforts. There are many frameworks that support very nice user interface components.
Responsive web design (RWD).
Bootstrap Tutorial
- Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.
- Bootstrap 4 supports many more design components, templates, and themes. But this class uses Bootstrap 3.
- Read all in Bootstrap Tutorial.
- Read all in Bootstrap Get Started.
  - What is RWD?
  - What does Bootstrap include? Are design templates included?
  - <meta> tag?
  - Typical structure to use Bootstrap
    1. <meta> tag
    2. Bootstrap CSS library
    3. jQuery library
    4. Bootstrap JS library
    5. div.container or div.container-fluid class - not nestable
- How to adjust the layout?
  - Read all in Bootstrap Grids.
  - div.col-(xs|sm|md|lg)-(1|2|...|12) within div.row
- Trial 1: Let's try to give good divisions. Two rows, and two columns in the second row.
   <div class=???> <div class=??? style='background-color:LightBlue; height:100px;'> <h1 style='???:center'>When you want more, you can get more.</h1> </div> <div class=???> <div class='col-sm-2' style='background-color:LightGreen; height:200px;'> What a great world! </div> <div class='col-???-???' style='background-color:LightYellow; height:200px;'> What a wonderful world! </div> </div> </div>
- For consistent look and feel, and design templates, i.e., user interface components
  - Buttons
  - Tables
  - Dropdowns
  - Tabs
  - Forms
  - Modal
  - Carousel
  - ...
Learning outcomes

7.1 Bootstrap - Responsive Web Design